<template>
  <div class="refund">
    <section>
      <el-table :data="tableData">
        <el-table-column label="用户" prop="username" align="center"></el-table-column>
        <el-table-column label="联系方式" prop="telephone" align="center"></el-table-column>
        <el-table-column label="停车场" prop="parkName" align="center"></el-table-column>
        <el-table-column label="车牌号" prop="carNum" align="center"></el-table-column>
        <el-table-column label="退款金额" prop="refundAmount" align="center"></el-table-column>
        <el-table-column label="进出场订单号" prop="orderCode" align="center"></el-table-column>
        <el-table-column label="会员卡支付订单号" prop="cardRecordOrderCode" align="center"></el-table-column>
        <el-table-column label="入场时间" prop="inTime" align="center"></el-table-column>
        <el-table-column label="出场时间" prop="outTime" align="center"></el-table-column>
        <el-table-column label="状态" prop="status" align="center">
          <template slot-scope="scope">
            {{ scope.row.status | statusFilter}}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="warning" :disabled="scope.row.status != 0" @click="examineShow = true,row = scope.row">审核</el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>

    <!-- 分页 -->
    <footer>
      <el-pagination
        :hide-on-single-page="false"
        :current-page="searchForm.pageNum"
        :page-sizes="[10, 15, 20, 30]"
        :page-size="10"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        align="center"
        style="margin-top:30px;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </footer>

    <el-dialog :visible.sync="examineShow" width="400px" :close-on-click-modal="false" :close-on-press-escape="false">
      <examine v-if="examineShow" :row = "row" @closeDialog="examineShow = false" @refresh="getRefundList" />
    </el-dialog>

  </div>
</template>

<script>
  import examine from './components/examine.vue'

  export default {
    name: 'refund',
    components: { examine },
    filters: {
      statusFilter(status) {
        if(status == 0) return '待审核'
        if(status == 1) return '审核中'
        if(status == 2) return '已通过'
        if(status == 3) return '已拒绝'
      }
    },
    data() {
      return {
        searchForm: {
          pageNum: 1,
          pageSize: 10
        },
        tableData: [],
        seeimg: false,
        total: null,
        examineShow: false
      }
    },
    mounted() {
      this.getRefundList();
    },
    methods: {
      getRefundList() {
        this.$axios({
          method: 'get',
          url: '/order/order-refund/get-refund-list',
          params: this.searchForm
        }).then((res) => {
			 console.log(2222,res)
          this.total = res.data.total;
          this.tableData = res.data.records;
        })
      },
      lookimg(row) {
        this.seeimg = true;
        this.imgUrl = row.imgUrl
      },
      // 分页修改每页显示条数
      handleSizeChange(val) {
        this.searchForm.pageSize = val;
        this.getRefundList();
      },
      // 分页跳转页面
      handleCurrentChange(val) {
        this.searchForm.pageNum = val;
        this.getRefundList();
      }

    }
  }
</script>

<style scoped>
  .refund {
    /* padding: 10px;
    display: flex;
    display: -webkit-flex;
    flex-direction: column; */
    /* height: 100%; */
    /* background-color: #0000FF; */
  }
  section {
    /* height: 100%; */
   /* flex-grow: 1;
    padding: 20px; */
  }
  .seeImg {
    color: #1890FF;
  }
  .seeImg:hover {
    cursor: pointer;
  }

</style>
